<div class="field-wrapper">
  <label class="label" *ngIf="!componentData.extends?.noLabelTxt">{{componentData.labelText}}</label>
  <ng-container *ngIf="!componentData.disabled;else disabledTpl">
    <div class="f-content">
      <div class="table-container">
        <nz-table [nzBordered]="showBorder" [nzData]="[1]" [nzShowPagination]="false" #editRowTable class="full-width">
          <thead *ngIf="!componentData.extends.hideHeader">
            <tr>
              <th nzAlign="center" *ngIf="!componentData.extends.hideNo">
                序号
              </th>
              <th nzAlign="center" *ngFor="let item of componentData.extends.fields">
                {{item.name}}
              </th>
              <th nzAlign="center" *ngIf="!componentData.extends.hideDelBtn">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr class="editable-row" *ngFor="let row of rows; let index = index">
              <td *ngIf="!componentData.extends.hideNo" [ngClass]="{'no-border': !showBorder}">
                {{index+1}}
              </td>
              <td class="table-td-width" *ngFor="let item of row" [ngClass]="{'no-border': !showBorder}">
                <zepride-cell-tmp [parentBindField]="componentData.bindField" [tmpComItemId]="item.tmpComItemId"
                  [componentData]="item.component" [dataModel]="dataModel"
                  [showLabelTxt]="componentData.extends.showComLabel" [disabled]="!editable"
                  [invalid]="componentData.invalid" [tplInvalid]="componentData.tplInvalid">
                </zepride-cell-tmp>
              </td>
              <td [ngClass]="{'no-border': !showBorder}" *ngIf="!componentData.extends.hideDelBtn">
                <a *ngIf="index != 0" nz-popconfirm nzPopconfirmTitle="是否要删除？" (click)="delRow(index)">
                  <i class="iconfont icon-delete-bin-line"></i>
                </a>
              </td>
            </tr>
          </tbody>
        </nz-table>
      </div>
      <button [zeprideAuthority]="zeprideAuthorityData" nz-button nzType="dashed" style="margin-top:20px" nzBlock
        (click)="addRow()" *ngIf="!componentData.extends.hideAddBtn">
        <i class="iconfont icon-add-fill"></i>
        添加表格行
      </button>
    </div>
  </ng-container>

</div>

<ng-template #disabledTpl>
  <div class="table-container-disable">
    <nz-table [nzBordered]="showBorder" [nzData]="[1]" [nzShowPagination]="false" class="full-width">
      <thead *ngIf="!componentData.extends.hideHeader">
        <tr>
          <th nzAlign="center" *ngIf="!componentData.extends.showComLabel">
            序号
          </th>
          <th nzAlign="center" *ngFor="let item of componentData.extends.fields">
            {{item.name}}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr class="editable-row" *ngFor="let row of rows; let index = index">
          <td *ngIf="!componentData.extends.showComLabel" [ngClass]="{'no-border': !showBorder}">
            {{index+1}}
          </td>
          <td class="table-td-width" *ngFor="let item of row; let rowIndex = index"
            [ngClass]="{'no-border': !showBorder}">
            {{getRowColumValue(index, item)}}
          </td>
        </tr>
      </tbody>
    </nz-table>

    <div style="margin-left: 10px;">
      <i *ngIf="dataChangeLog" class="iconfont icon-file-list-2-line icon-data-change" nz-popover
        [nzPopoverContent]="contentTemplate"></i>
    </div>
  </div>

</ng-template>

<ng-template #contentTemplate>
  <div class="popover-content">
    <div>近期更正</div>
    <div>更正时间：{{dataChangeLog.time | date: 'yyyy年MM月dd日 HH:mm'}}</div>
    <div>更正内容：由“<span class="font-red">{{getChangeLogSource()}}</span>”更正为“<span
        class="font-bule">{{getChangeLogTarget()}}</span>”
    </div>
  </div>
</ng-template>